<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Result 结果</title>
	<link rel="stylesheet" href="../static/css/reset.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<script src="../static/js/antd.min.js"></script>
	<script src="../static/js/icons_antd.js"></script>
</head>
<style>
.aut-icon{
	color: red;
	margin-bottom: -2px;
}
</style>
<body>
<div id="app">
	<a-divider class="a-divi" orientation="left">Success</a-divider><!-- =============================================================== -->
	<p class="desc">成功的结果。</p>
	<a-result status="success" title="Successfully Purchased Cloud Server ECS!"
		sub-title="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.">
		<template #extra>
			<a-button key="console" type="primary">Go Console</a-button>
			<a-button key="buy">Buy Again</a-button>
		</template>
	</a-result>
	
	<a-divider class="a-divi" orientation="left">Info</a-divider><!-- =============================================================== -->
	<p class="desc">展示处理结果。</p>
	<a-result title="Your operation has been executed">
		<template #extra>
			<a-button key="console" type="primary">Go Console</a-button>
		</template>
	</a-result>
	
	<a-divider class="a-divi" orientation="left">Warning</a-divider><!-- =============================================================== -->
	<p class="desc">警告类型的结果。</p>
	<a-result status="warning" title="There are some problems with your operation.">
		<template #extra>
			<a-button key="console" type="primary">Go Console</a-button>
		</template>
	</a-result>
	
	<a-divider class="a-divi" orientation="left">403</a-divider><!-- =============================================================== -->
	<p class="desc">你没有此页面的访问权限。</p>
	<a-result status="403" title="403" sub-title="Sorry, you are not authorized to access this page.">
		<template #extra>
			<a-button type="primary">Back Home</a-button>
		</template>
	</a-result>
	
	<a-divider class="a-divi" orientation="left">404</a-divider><!-- =============================================================== -->
	<p class="desc">此页面未找到。</p>
	<a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
		<template #extra>
			<a-button type="primary">Back Home</a-button>
		</template>
	</a-result>
	
	<a-divider class="a-divi" orientation="left">500</a-divider><!-- =============================================================== -->
	<p class="desc">服务器发生了错误</p>
	<a-result status="500" title="500" sub-title="Sorry, the server is wrong.">
		<template #extra>
			<a-button type="primary">Back Home</a-button>
		</template>
	</a-result>
	
	<a-divider class="a-divi" orientation="left">Error</a-divider><!-- =============================================================== -->
	<p class="desc">复杂的错误反馈。</p>
	<a-result status="error" title="Submission Failed" sub-title="Please check and modify the following information before resubmitting.">
		<template #extra>
			<a-button key="console" type="primary">Go Console</a-button>
			<a-button key="buy">Buy Again</a-button>
		</template>
	
		<div class="desc">
			<p style="font-size: 16px">
				<strong>The content you submitted has the following error:</strong>
			</p>
			<p>
				<close-circle-outlined class="aut-icon"></close-circle-outlined>
				Your account has been frozen
				<a>Thaw immediately &gt;</a>
			</p>
			<p>
				<close-circle-outlined class="aut-icon"></close-circle-outlined>
				Your account is not yet eligible to apply
				<a>Apply Unlock &gt;</a>
			</p>
		</div>
	</a-result>
	
	<a-divider class="a-divi" orientation="left">自定义 icon</a-divider><!-- =============================================================== -->
	<p class="desc">自定义 icon。</p>
	<a-result title="Great, we have done all the operations!">
		<template #icon>
			<smile-two-tone style="width: 160px;"></smile-two-tone>
		</template>
		<template #extra>
			<a-button type="primary">Next</a-button>
		</template>
	</a-result>
	
	
</div>
<div class="h100"></div>

</body>
<script>
const Main = {
data() {
	return {
		message: 'Hello Vue!!',
		
	}
},
methods:{
	fn(){
		this.message = "欢迎来到HTML中文网。";
	},
	hello(par){
		this.message = "参数值为：" + par;
	},
	
	
},
}

const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(AntdIconsVue)) {app.component(key, component)};
app.use(antd);
let vm = app.mount("#app");


</script>
</html>
